<template>
    <div class="common-layout">
        <el-container>
            <el-aside :width="new_width">
                <div>{{ isBart ? '管理' : '管理系统' }}</div>
                <div>
                    <el-menu class="el-menu-vertical-demo" default-active="2" :collapse="isBart"
                        :style="{ border: 'none' }">
                        <el-menu-item index="1" @click="ck2"
                            :style="{ color: store.state.newpath == '/app1' ? 'gold' : 'white' }">
                            <el-icon :style="{ color: store.state.newpath == '/app1' ? 'gold' : 'white' }">
                                <PriceTag />
                            </el-icon>
                            <span>首页</span>
                        </el-menu-item>
                        <el-menu-item index="2" @click="ck1('/shop', '商品管理')"
                            :style="{ color: store.state.newpath == '/shop' ? 'gold' : 'white' }">
                            <el-icon :style="{ color: store.state.newpath == '/shop' ? 'gold' : 'white' }">
                                <ShoppingBag />
                            </el-icon>
                            <span>商品管理</span>
                        </el-menu-item>
                        <el-menu-item index="3" @click="ck1('/user', '用户列表')"
                            :style="{ color: store.state.newpath == '/user' ? 'gold' : 'white' }">
                            <el-icon :style="{ color: store.state.newpath == '/user' ? 'gold' : 'white' }">
                                <Phone />
                            </el-icon>
                            <span>用户管理</span>
                        </el-menu-item>
                        <el-menu-item index="4" @click="ck1('/page', '个人中心')"
                            :style="{ color: store.state.newpath == '/page' ? 'gold' : 'white' }">
                            <el-icon :style="{ color: store.state.newpath == '/page' ? 'gold' : 'white' }">
                                <Place />
                            </el-icon>
                            <span>个人中心</span>
                        </el-menu-item>
                    </el-menu>
                </div>
            </el-aside>
            <el-container>
                <el-header>
                    <el-breadcrumb separator="|">
                        <!-- @click="ck" -->
                        <div class="hezi" @click="ck">
                            <el-icon>
                                <Menu />
                            </el-icon>
                        </div>
                        <el-breadcrumb-item class="breadcrumb" @click="ck3('/app1')">首页</el-breadcrumb-item>
                        <div class="breadcrumb1">
                            <el-breadcrumb-item @click="ck3(item.address)" v-for="(item, index) in tags" :key="index">
                                {{ item.name }}
                            </el-breadcrumb-item>
                        </div>
                        <div class="touxiang">
                            <el-image style="width: 45px; height: 45px" :src="url" :fit="fit" />
                        </div>
                    </el-breadcrumb>
                </el-header>
                <el-main>
                    <div class="shouye">
                        <el-tag @click="ck2"
                            :style="{ backgroundColor: store.state.newpath == '/app1' ? 'skyblue' : 'white' }">首页</el-tag>
                        <el-tag v-for="tag, index in tags" :key="tag.name" closable :address="tag.address"
                            @close="handleClose(tag, index)" @click="ck3(tag.address)"
                            :style="{ backgroundColor: store.state.newpath == tag.address ? 'skyblue' : 'white' }">
                            {{ tag.name }}
                        </el-tag>
                    </div>
                    <router-view />
                </el-main>
                <el-footer>Footer</el-footer>
            </el-container>
        </el-container>
    </div>
</template>
<script setup>
import { onMounted } from 'vue'
import { useStore } from 'vuex'
const store = useStore()
// console.log('111', store.state.arr);

// axios请求
// import { getCurrentInstance } from 'vue';
// const { proxy } = getCurrentInstance()
// proxy.$api
//     .get(
//     '//openapiv2.dataoke.com/open-api/goods/list-super-goods?type=0&pageId=1&pageSize=56&keyWords=%E6%89%8B%E6%9C%BA&appKey=622b674f76e31'
//     )
//     .then((res)=>{
//         console.log(res);
//     })



import { reactive, ref } from 'vue';
import { useRouter } from 'vue-router';
let router = useRouter();
// 头像的获取
const url =
    'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg'

function ck2() {
    router.push({
        path: '/oneData'
    })
    store.commit('changeNewpath', '/app1')
}
let tags = reactive([])
function ck1(a, val2) {
    store.commit('changeNewpath', a)
    let apper2 = 0
    for (let index = 0; index < tags.length; index++) {
        if (tags[index].address == a) {
            apper2++
        }
    }
    if (apper2 == 0) {
        tags.push({ name: val2, address: a })
    }
    router.push({
        path: `${a}`
    })
}
function ck3(val) {
    router.push({
        path: `${val}`
    })
    store.commit('changeNewpath', val)

}
function handleClose(tag, index) {
    const item = tags.indexOf(tag)
    if (tags.length > 1 && index == 0) {
        router.push(tags[index + 1].address)
        store.commit('changeNewpath', tags[index + 1].address)
    } else if (tags.length != 0 && index > 0) {
        router.push(tags[index - 1].address)
        store.commit('changeNewpath', tags[index - 1].address)
    } else {
        router.push("/app1")
        store.commit('changeNewpath', '/app1')
    }
    tags.splice(item, 1)
}
onMounted(() => {
    router.push('/oneData')
    store.commit('changeNewpath', '/app1')
})

// 抽屉栏
let new_width = ref('140px')
let isBart = ref(false)
function ck() {
    isBart.value = !isBart.value
    isBart.value ? new_width.value = "65px" : new_width.value = '140px'
}


</script>

<style lang="less" scoped>
.touxiang {
    position: absolute;
    left: 1200px;
    top: 8px;
    // outline: 1px solid red;
    width: 45px;
    height: 45px;
    border-radius: 50%;

    .el-image {
        width: 5px;
        height: 5px;
        border-radius: 50%;
    }
}

.shouye {
    text-align: left;
}

.breadcrumb {
    margin-left: 50px;
    margin-top: -18px;
}

.breadcrumb1 {
    display: flex;
    margin-left: 100px;
    margin-top: -18px;
}

.hezi {
    margin-top: 20px;
    width: 35px;
    height: 20px;
    background-color: #fff;
    // outline: 1px solid red;
}

.el-menu,
.el-menu-item,
.el-submenu,
.el-menu-item-group,
template {
    background-color: #737e8b;
    // color: #77e788;
}

.el-menu {
    text-align: center;
}

.el-menu-item,
.el-submenu {
    text-align: left;
}

.el-menu-item:hover {
    background-color: #333333d3;
}

.el-breadcrumb {
    margin-left: -10px;
    // outline: 1px solid red;

    .hezi>.el-icon {
        margin-top: 3px;
    }
}

.el-header,
.el-footer {
    background-color: #B3C0D1;
    color: #333;
    text-align: center;
    // line-height: 60px;
}

.el-aside {
    transition: all .25s;
    background-color: #737e8b;
    color: #333;
    text-align: center;
    // line-height: 200px;
    height: 100vh;
}

.el-main {
    background-color: #E9EEF3;
    color: #333;
    text-align: center;
    line-height: 20px;
    height: 80vh;
}

body>.el-container {
    margin-bottom: 40px;
}

.el-container:nth-child(5) .el-aside,
.el-container:nth-child(6) .el-aside {
    line-height: 260px;
}

.el-container:nth-child(7) .el-aside {
    line-height: 320px;
}
</style>